<template>
  <el-form
       ref="configsForm"
       :rules="configsRule"
       label-width="150px"
       :model="form" class="demo-form-inline">
    <el-tip>注：通过本周（自然周）累计有效体育/娱乐投注金额赠送本周免费提现次数（次数实时计算）；赠送的免费提现次数在周日23:59:59清零</el-tip>
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="panel">
          <h3>体育流水赠送设置</h3>
          <el-button @click="addRowHandler(1)" style="margin-bottom:10px;">添加</el-button>
          <table class="config-table">
            <tr style="text-align:center;">
              <td width="100">周累计有效投注金额（自然周）</td>
              <td width="100">赠送免费提现次数</td>
            </tr>
            <tr v-for="(row,index) in form.sportRuleList" :key="index">
              <td width="30%">
                <el-form-item label="" label-width="0px" :prop="'sportRuleList['+index+'].betAmount'" :rules="strategyRule.betAmount">
                  <el-input v-model.number="row.betAmount"  placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
                    <template slot="prepend">&gt;=</template>
                    <template slot="append">元</template>
                  </el-input>
                  <el-tip v-if="row.betAmount==''" style="color:red;">周累计有限投注额必须填写</el-tip>
                </el-form-item>
              </td>
              <td width="30%">
                <el-form-item label="" label-width="0px" :prop="'sportRuleList['+index+'].freeTimes'" :rules="strategyRule.freeTimes">
                  <el-input v-model.number="row.freeTimes" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
                    <template slot="append">次数</template>
                  </el-input>
                  <el-tip v-if="row.freeTimes==''" style="color:red;">免费提现次数必须填写</el-tip>
                </el-form-item>
              </td>
              <td width="10%">
                <el-form-item label-width="0px">
                  <el-button @click="delRowHandler(1,index)">删除</el-button>
                </el-form-item>
              </td>
            </tr>
          </table>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="panel">
          <h3>娱乐流水赠送设置</h3>
          <el-button @click="addRowHandler(2)" style="margin-bottom:10px;">添加</el-button>
          <table class="config-table">
            <tr style="text-align:center;">
              <td width="100">周累计有效投注金额（自然周）</td>
              <td width="100">赠送免费提现次数</td>
            </tr>
            <tr v-for="(row,index) in form.funGameRuleList" :key="index">
              <td width="30%">
                <el-form-item label="" label-width="0px" :prop="'funGameRuleList['+index+'].betAmount'" :rules="strategyRule.betAmount">
                  <el-input v-model.number="row.betAmount"  placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
                    <template slot="prepend">&gt;=</template>
                    <template slot="append">元</template>
                  </el-input>
                  <el-tip v-if="row.betAmount==''" style="color:red;">周累计有限投注额必须填写</el-tip>
                </el-form-item>
              </td>
              <td width="30%">
                <el-form-item label="" label-width="0px" :prop="'funGameRuleList['+index+'].freeTimes'" :rules="strategyRule.freeTimes">
                  <el-input v-model.number="row.freeTimes" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
                    <template slot="append">次数</template>
                  </el-input>
                  <el-tip v-if="row.freeTimes==''" style="color:red;">免费提现次数必须填写</el-tip>
                </el-form-item>
              </td>
              <td width="10%">
                <el-form-item label-width="0px">
                  <el-button @click="delRowHandler(2,index)">删除</el-button>
                </el-form-item>
              </td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="每天提现次数上限" prop="countLimit">
          <el-input placeholder="请输入" v-model.number="form.countLimit" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
            <template slot="append">次数</template>
          </el-input>
          <el-tip>注1：达到“提现次数”上限后，则无法进行提现</el-tip>
          <!--<el-tip>注2：大额提款每天提现次数上限与“普通提现每天提现上限”共用</el-tip>-->
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="每天提现金额上限" prop="amountLimit">
          <el-input placeholder="请输入" v-model.number="form.amountLimit">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-col> -->
    </el-row>
    <el-row>
        <el-col :span="12">
        <el-form-item label="超过免费次数收取" prop="fee" class="with-pre-select">
          <el-input placeholder="请输入次数" v-model.number="form.fee" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
            <template slot="prepend">
              <!--手续费类型：fix固定金额，percent百分比-->
              <el-select v-model="form.feeType">
                <el-option label="百分比" value="percent"></el-option>
                <!-- <el-option label="固定金额" value="fix"></el-option> -->
              </el-select>
            </template>
            <template slot="append">手续费</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!-- <el-form-item label="手续费上限" prop="feeLimit">
          <el-input placeholder="请输入" v-model.number="form.feeLimit">
            <template slot="append">元</template>
          </el-input>
        </el-form-item> -->
      </el-col>
    </el-row>
    <el-card class="box-card">
      <div slot="header">
        <span>单笔提现限额设置</span>
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="单笔最低限额" prop="minLimit">
            <el-input placeholder="请输入金额" v-model.number="form.minLimit" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
              <template slot="append">元</template>
            </el-input>
            <span v-if="form.minLimit*1>=form.maxLimit*1" style="color:red">最低限额不能等于或大于最高限额</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单笔最高限额" prop="maxLimit">
            <el-input placeholder="请输入金额" v-model.number="form.maxLimit" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-tip>*最低限额不填写则默认“10元”，最高限额不填写则默认"无上限"</el-tip>
    </el-card>

    <el-card class="box-card" style="margin-top:10px">
      <div slot="header">
        <span>提现拆单设置</span>
      </div>
      <el-button @click="addSplitHandler()">添加</el-button>
      <div>
        <table class="config-table">
          <tr style="text-align:center;">
            <td width="100">提现金额区间</td>
            <td width="100">拆单金额</td>
            <td width="100">随机值</td>
          </tr>
          <tr v-for="(row,index) in form.splitRuleList" :key="index">
            <td width="30%">
              <el-form-item label="" :prop="'splitRuleList['+index+'].minAmount'" >
                <el-input v-model.number="row.minAmount" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
                  <template slot="append">元</template>
                </el-input>
                <el-input v-model.number="row.maxAmount" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </td>
            <td width="30%">
              <el-form-item label="" :prop="'splitRuleList['+index+'].splitAmount'">
                <el-input v-model.number="row.splitAmount" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
                  <template slot="append">元</template>
                </el-input>
                <el-tip v-if="row.splitAmount*1>row.maxAmount*1" style="color:red;">提现拆单金额最大区间设置不可超出“提现金额区间”最大值</el-tip>
              </el-form-item>
            </td>
            <td width="30%">
              <el-form-item label="">
                <el-input v-model.number="row.randomAmount" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
                  <template slot="prepend">+-</template>
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </td>
            <td width="10%">
              <el-form-item>
                <el-button @click="delSplitHandler(index)">删除</el-button>
              </el-form-item>
            </td>
          </tr>
        </table>
      </div>
    </el-card>
    <div class="m-config">
      <el-tip>注1:提现金额最大区间设置不可超出“每天提现金额上限”同时不可超出“单笔最高限额”</el-tip>
      <el-tip>注2:提现拆单金额最大区间设置不可超出“提现金额区间”最大值</el-tip>
      <el-tip>注3:提现拆单数量不可超出“每日提现次数上限”（提现拆单的计算为1笔提现次数）</el-tip>
      <!--<el-tip>注4:若用户提现金额及拆单数量，超出“每日提现次数/每日提现金额”；前台显示“提现金额及次数超出每日上限，请明天在进行提现”</el-tip>-->
    </div>
    <div style="padding: 20px 0 20px 150px">
      <el-button v-if="roleCheck('withdraw-config-save')" class="filter-item" type="primary" icon="el-icon-printer"
                 @click="doSave({action: 'saveForm', form: 'configsForm'})">保存
      </el-button>
    </div>
  </el-form>
</template>

<script>
  import {form, factory} from '@/build'
  import {getWithdrawVipConfig,updateWithdrawVipConfig} from '@/services/api/withdraw'

  export default {
    name: "withdraw-configs",
    mixins: [form, factory],
    data() {
      return {
        form: {
          splitRuleList: [{maxAmount: null, minAmount: null, splitAmount: null}],
          // vipRuleList: [{betAmount: null, freeTimes: null}],
          sportRuleList:[{betAmount: null, freeTimes: null}],
          funGameRuleList:[{betAmount: null, freeTimes: null}],
        },
         strategyRule: {
          // betAmount:[
          //   {required: true,message:'天累计有效投注金额不能为空'}
          // ],
          betAmount: factory.getRule('money'),
          freeTimes: [
            {validator: factory.getValidator('nonNegativeInteger')},
          ],
        },
        configsRule:{
          countLimit:[
            {required: true,message:'每天提现次数上限不能为空'}
          ],
          fee:[
            {required: true,message:'超过免费提现次数收取不能为空'},
            { validator: factory.getValidator('nonNegativeNumber') },
          ],
          feeLimit:[
            {required: true,message:'手续费上限不能为空'}
          ],
        }
      }
    },
    created(){
        this.bindGet(getWithdrawVipConfig, 'form',{
        format: data=>{
          // return data || {}
          let result ;
          if(data){
            if(!data.sportRuleList || _.isEmpty(data.sportRuleList) || _.isNull(data.sportRuleList)){
              data.sportRuleList = this.form.sportRuleList;
            }
            if(!data.funGameRuleList || _.isEmpty(data.funGameRuleList) || _.isNull(data.funGameRuleList)){
              data.funGameRuleList = this.form.funGameRuleList;
            }
            result = data
          }else{
            result = this.form
          }
          result.sportRuleList = _.sortBy(result.sportRuleList,(item) => {
            return item.betAmount;
          })
          result.funGameRuleList = _.sortBy(result.funGameRuleList,(item) => {
            return item.betAmount;
          })
          return result;
        }
      });
      this.getAll();
    },
    mounted() {
    //   tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG,{content:_.getContent(this.$route,'Vip提现设置',true)});
      this.bindSave(updateWithdrawVipConfig, 'saveForm', 'form', {
      });
    //   this.bindGet(getWithdrawVipConfig, 'form',{
    //     format: data=>{
    //       return data || {}
    //     }
    //   });
      this.getAll();
    },
    methods:{
      addRowHandler(type) {
        if(type === 1){
          this.form.sportRuleList = this.form.sportRuleList || []
          this.form.sportRuleList.push({
            betAmount: null,
            freeTimes: null,
          })
        }else{
          this.form.funGameRuleList = this.form.funGameRuleList || []
          this.form.funGameRuleList.push({
            betAmount: null,
            freeTimes: null,
          })
        }
      },
      delRowHandler(type,index) {
        if(type === 1){
          this.form.sportRuleList.splice(index, 1);
        }else{
          this.form.funGameRuleList.splice(index, 1);
        }
      },
      addSplitHandler() {
        this.form.splitRuleList = this.form.splitRuleList || []
        this.form.splitRuleList.push({
          maxAmount: null,
          minAmount: null,
          splitAmount: null,
          randomAmount: null,
        })
      },
      delSplitHandler(index) {
        this.form.splitRuleList.splice(index, 1)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 120px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }

  .config-table {
    margin: 10px;
  }

  .m-config{
    margin-top: 20px;
  }
  .panel{
    border: 1px solid #dcdfe6;
    padding: 5px;
    margin: 10px 0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  }
</style>
